<route lang="json5" type="page">
	{
	  style: {
		navigationStyle: 'custom',
		navigationBarTitleText: '',
	  },
	}
</route>
<template>
	<view class="bg-white overflow-hidden" :style="{ marginTop: safeAreaInsets?.top + 'px' }">


		<view class="main-title main-title-color">
			<view class="main-title-head flex flex-row" style="align-items: center;">
				<img src="../../static/images/a.jpg" alt="">
				<view style="color: aliceblue;margin-left: 10px;" class="flex flex-col">
					<text style="font-size: 18px;">陈荣丽</text>
					<text style="font-size: 14px;">计算机工程系</text>
				</view>
			</view>

			<view class="main-title-main">
				<img src="../../static/images/background.png" alt="">
				<text class="text1">行万里路，读万卷书</text>
				<!-- :text="progressText" -->
				<wd-circle v-model="current" :strokeWidth="18" color="#4FFEB9" layer-color="rgba(0, 0, 0, 0)"
					:size="160" fill="white"
					customStyle="font-weight:700;font-size:35rpx;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">

					<div>
						<p>欢迎使用</p>
						<p>逐光励行</p>
					</div>
				</wd-circle>

				<p class="walk-text1">今日步行<span style="font-weight: 600;">{{ steps }}</span>步</p>
				<p class="walk-text2">距离<span style="font-weight: 600;">{{ kilometre }}</span>公里</p>

				<wd-button custom-class="signIn-button" size="large">{{ buttonText }} <i
						class="iconfont icon-dayuhao"></i></wd-button>
			</view>
		</view>


		<view class="main-title-main functionList" style="margin-top: 6vh;">

			<p>考勤</p>
			<view class="grid grid-cols-4  mx-auto checkWorkAttendance">

				<view class="flex flex-col items-center flex-justify-end">
					<i class="iconfont icon-guanliyuan_guanliyuanrizhi"></i>
					<p>课程管理</p>
				</view>

				<view class="flex flex-col items-center flex-justify-end">
					<i class="iconfont icon-mokuaiguanli"></i>
					<p>晚签管理</p>
				</view>

				<view class="flex flex-col items-center flex-justify-end">
					<i class="iconfont icon-guanliyuan_guanliyuanrizhi"></i>
					<p>晚修管理</p>
				</view>
			</view>

			<p style="margin-top: 45rpx;">生活</p>
			<view class="grid grid-cols-4 mx-auto checkWorkAttendance">
				<view class="flex flex-col items-center flex-justify-end">
					<i class="iconfont icon-bushu"></i>
					<p>步数排行</p>
				</view>

				<view class="flex flex-col items-center flex-justify-end">
					<i class="iconfont icon-chatbubbles"></i>
					<p>校规助手</p>
				</view>
			</view>

			<p style="margin-top: 45rpx;">管理</p>
			<view class="grid grid-cols-4 mx-auto checkWorkAttendance">
				<view class="flex flex-col items-center flex-justify-end">
					<i class="iconfont icon-yonghu"></i>
					<p>用户</p>
				</view>

				<view class="flex flex-col items-center flex-justify-end">
					<i class="iconfont icon-jiaoseguanli"></i>
					<p>角色</p>
				</view>
			</view>
		</view>

	</view>
</template>

<script lang="ts" setup>
const current = ref<number>(100)
let steps = ref<number>(15600)
let kilometre = ref<number>(4.2)
let buttonText = ref<string>("查看排行")


// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

// 测试 uni API 自动引入
onLoad(() => {

})

// 	晚签打卡
const nightDaka = () => {
	//在起始页面跳转到test.vue页面并传递参数
	uni.navigateTo({
		url: '/pages/lateSigning/lateSigning'
	});

}
</script>

<style scoped>
.main-title {
	width: 748rpx;
	height: 38vh;
}

.main-title-color {
	/* border: 1px solid black; */
	background: linear-gradient(to right, #7AE3FE, #45AFF8);
	box-shadow: 0 5px 5px -2px rgba(68, 133, 171, 0.5), 0 8px 7px 5px rgba(202, 232, 251, 0.5);
	border-bottom-left-radius: 50rpx;
	border-bottom-right-radius: 50rpx;
}

.main-title-head {
	/* width: 746rpx; */
	height: 15%;
	background: linear-gradient(to right, #2B87F6, #2B71F6);
	box-shadow: 0 5px 5px -5px rgba(42, 127, 177, 0.5), 0 8px 10px -5px rgba(24, 54, 72, 0.5);
	border-bottom-left-radius: 50rpx;
	border-bottom-right-radius: 50rpx;
	padding: 12rpx 0 12rpx 38rpx;
}

.main-title-head>img {
	border: 2px solid white;
	border-radius: 50%;
	width: 70rpx;
	height: 70rpx;
}

.main-title-main {
	width: 746rpx;
	/* box-shadow: 0 5px 5px 5px rgba(30, 152, 223, 0.5), 0 8px 10px 5px rgba(97, 142, 170, 0.5); */
}

.main-title-main>img {
	/* width: 250px;
	height: 220px; */
	width: 30vh;
	height: 23vh;
	position: absolute;
	/* top: 110px; */
	/* left: 130px; */
	top: 8%;
	left: 30%;
	z-index: 0;
}

.text1 {
	letter-spacing: 1px;
	position: absolute;
	color: aliceblue;
	font-size: 14px;
	font-weight: 550;
	/* left: 270px; */
	/* top: 110px; */
	left: 60%;
	top: 9%;
}

.walk-text1 {
	letter-spacing: 1px;
	position: absolute;
	color: aliceblue;
	font-size: 14px;
	/* left: 85px;
	top: 340px; */
	left: 20%;
	top: 34%;
}

.walk-text2 {
	letter-spacing: 1px;
	position: absolute;
	color: aliceblue;
	font-size: 14px;
	/* left: 245px;
	top: 340px; */
	left: 60%;
	top: 34%;
}

.wd-circle[data-v-4ababa18] {
	position: relative;
	display: inline-block;
	text-align: center;
	border-radius: 50%;
	top: 25px;
	left: 30px;
}


.signIn-button {
	height: 100rpx !important;
	position: absolute;
	color: #925E00 !important;
	font-weight: 700;
	/* background-color: #FECB46 ; */
	background: linear-gradient(to right, #FECB46, #eef785) !important;
	/* font-size: 14px;
	font-weight: 550; */
	left: 34%;
	top: 35vh;
}

.functionList>p {
	font-size: 18px;
	font-weight: 700;
	margin-left: 4vh;
}


.checkWorkAttendance {
	column-gap: 30rpx;
	row-gap: 12rpx;
	max-width: 600rpx;
}

.checkWorkAttendance>view {
	height: 110rpx;
}

.checkWorkAttendance>view>p {
	/* font-weight: 550; */
}
</style>
